import React, { useEffect } from 'react';

/**
 * 导出格式选项接口
 */
export interface ExportFormat {
  value: string;
  label: string;
  requiresBackend: boolean;
}

/**
 * 导出选项接口
 */
export interface ExportOptions {
  filename?: string;
  includeTitle?: boolean;
}

/**
 * 导出对话框属性接口
 */
interface ExportDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onExport: (format: string, options?: ExportOptions) => void;
  availableFormats: ExportFormat[];
  defaultFilename?: string;
}

/**
 * 导出对话框组件
 * 提供格式选择和导出选项的模态窗口
 */
const ExportDialog: React.FC<ExportDialogProps> = ({
  isOpen,
  onClose,
  onExport,
  availableFormats,
  defaultFilename = 'article'
}) => {
  const [selectedFormat, setSelectedFormat] = React.useState<string>(availableFormats[0]?.value || 'markdown');
  const [filename, setFilename] = React.useState<string>(defaultFilename);
  const [includeTitle, setIncludeTitle] = React.useState<boolean>(true);

  // 监听defaultFilename的变化，当标题更新时自动更新文件名
  useEffect(() => {
    if (defaultFilename && defaultFilename !== 'article') {
      setFilename(defaultFilename);
    }
  }, [defaultFilename]);

  /**
   * 处理导出按钮点击事件
   */
  const handleExport = () => {
    if (!filename.trim()) {
      alert('请输入文件名');
      return;
    }
    
    onExport(selectedFormat, {
      filename: filename.trim(),
      includeTitle
    });
  };

  /**
   * 处理背景点击事件
   */
  const handleBackgroundClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  /**
   * 处理键盘事件
   */
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose();
    }
    if (e.key === 'Enter' && e.ctrlKey) {
      handleExport();
    }
  };

  // 如果对话框未打开，不渲染任何内容
  if (!isOpen) return null;

  return (
    <div 
      className="export-dialog-overlay" 
      onClick={handleBackgroundClick}
      onKeyDown={handleKeyDown}
      tabIndex={0}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
      }}
    >
      <div 
        className="export-dialog-content"
        style={{
          backgroundColor: 'white',
          borderRadius: '8px',
          padding: '24px',
          width: '90%',
          maxWidth: '480px',
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
          outline: 'none'
        }}
      >
        <h2 style={{
          margin: '0 0 24px 0',
          fontSize: '20px',
          fontWeight: '600',
          color: '#333'
        }}>
          导出文章
        </h2>

        <div style={{ marginBottom: '20px' }}>
          <label style={{
            display: 'block',
            marginBottom: '8px',
            fontSize: '14px',
            fontWeight: '500',
            color: '#444'
          }}>
            文件名
          </label>
          <input
            type="text"
            value={filename}
            onChange={(e) => setFilename(e.target.value)}
            placeholder="请输入文件名"
            style={{
              width: '100%',
              padding: '10px 12px',
              border: '1px solid #e1e5e9',
              borderRadius: '4px',
              fontSize: '14px',
              boxSizing: 'border-box'
            }}
            autoFocus
          />
        </div>

        <div style={{ marginBottom: '20px' }}>
          <label style={{
            display: 'block',
            marginBottom: '8px',
            fontSize: '14px',
            fontWeight: '500',
            color: '#444'
          }}>
            导出格式
          </label>
          <select
            value={selectedFormat}
            onChange={(e) => setSelectedFormat(e.target.value)}
            style={{
              width: '100%',
              padding: '10px 12px',
              border: '1px solid #e1e5e9',
              borderRadius: '4px',
              fontSize: '14px',
              backgroundColor: 'white',
              boxSizing: 'border-box'
            }}
          >
            {availableFormats.map((format) => (
              <option key={format.value} value={format.value}>
                {format.label}
                {format.requiresBackend && ' (需要后端处理)'}
              </option>
            ))}
          </select>
        </div>

        <div style={{ marginBottom: '24px' }}>
          <label style={{
            display: 'flex',
            alignItems: 'center',
            fontSize: '14px',
            color: '#444',
            cursor: 'pointer'
          }}>
            <input
              type="checkbox"
              checked={includeTitle}
              onChange={(e) => setIncludeTitle(e.target.checked)}
              style={{ marginRight: '8px' }}
            />
            包含文章标题
          </label>
        </div>

        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          <button
            onClick={onClose}
            style={{
              padding: '10px 20px',
              border: '1px solid #e1e5e9',
              borderRadius: '4px',
              fontSize: '14px',
              backgroundColor: 'white',
              color: '#333',
              cursor: 'pointer',
              transition: 'all 0.2s'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#f5f7fa';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'white';
            }}
          >
            取消
          </button>
          <button
            onClick={handleExport}
            style={{
              padding: '10px 20px',
              border: 'none',
              borderRadius: '4px',
              fontSize: '14px',
              fontWeight: '500',
              backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              color: 'white',
              cursor: 'pointer',
              transition: 'all 0.2s'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.opacity = '0.9';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.opacity = '1';
            }}
          >
            导出
          </button>
        </div>
      </div>
    </div>
  );
};

export default ExportDialog;